<template>
  <view :class="[`${prefixCls}-list-block-container`]">
    <view class="store-header" @click="handleHousingDetail(storeInfo.id)">
      <image v-if="storeInfo.isnew == 1" :src="$CDN('/customer/static/images/icons/is-new.png')" class="label-icon" />
      <text class="store-name">{{ storeInfo.name }}</text>
      <image class="right-icon" :src="$CDN('/customer/static/images/icons/go-store.png')" />
    </view>
    <view v-if="storeInfo.marketing_tag.length" class="marketing_tag" @click="handleHousingDetail(storeInfo.id)">
      <view class="tag-item marketing-tag" v-for="(item, index) in storeInfo.active_tag" :key="index">{{ item }}</view>
      <view class="tag-item" v-for="(item, index) in storeInfo.marketing_tag" :key="index">{{ item }}</view>
    </view>
    <view class="address" @click="handleHousingDetail(storeInfo.id)">
      <text class="text uv-line-1">{{ storeInfo.district }} | {{ storeInfo.address }}</text>
      <image v-if="isCurrCity && storeInfo.distanceText" class="address-icon" :src="$CDN('/customer/static/images/icons/address-icon.png')" />
      <text v-if="isCurrCity && storeInfo.distanceText">距您{{ storeInfo.distanceText }}</text>
    </view>
    <view class="room-container">
      <view class="room-item" v-for="(item, index) in storeInfo.room_type_list" :key="index" @click="handleRoomDetail(item, storeInfo.id)">
        <view class="room-card">
          <image :src="item.roomTypeCover" />
          <image class="tab-video" :src="$CDN('/customer/static/images/icons/has-video.png')" />
        </view>
        <view class="unit-type">{{ item.roomTypeTitle }} {{ item.minArea }} m²</view>
        <view class="tag">{{}}</view>
        <view class="amount">
          <view class="price">{{ item.minPrice }}</view>
          <view class="label">元/间/月起</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {
    storeInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo']),
    isCurrCity() {
      const cityName = this.cityConfig.cityName
      const city = this.locationInfo?.addressComponent?.city
      const locaName = city && city.indexOf('市') > -1 ? city.replace('市', '') : city
      return cityName == locaName
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    handleHousingDetail(id) {
      this.$ROUTE.go('/pages/subpackage/housing-resources/housing-detail/index', { projectId: id })
    },
    // 跳转至房间详情
    handleRoomDetail({ roomTypeId }, projectId) {
      this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId, projectId })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('list-block-container')} {
  position: relative;
  padding-bottom: 100rpx;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 16rpx;
  height: 500rpx;
  padding: 24rpx 24rpx 24rpx 30rpx;
  .store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18rpx;
    .label-icon {
      width: 60rpx;
      height: 36rpx;
    }
    .store-name {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      margin: 0 8rpx;
    }
    .right-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .marketing_tag {
    display: flex;
    margin-bottom: 8px;
    .tag-item {
      padding: 1px 4px;
      background: #f0f3f7;
      border-radius: 4px;
      font-weight: 400;
      font-size: 10px;
      color: #81848c;
      line-height: 14px;
      margin-right: 4px;
    }
    .marketing-tag {
      background: #e7f5ff;
      color: #2aa5fa;
    }
  }
  .address {
    font-weight: 400;
    font-size: 22rpx;
    color: #666666;
    display: flex;
    align-items: center;
    .text {
      width: 250px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: normal;
    }
    .address-icon {
      margin-left: auto;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .room-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-top: 24rpx;
    overflow: auto;
  }
  .room-item {
    // width: calc(100% / 3);
    margin-right: 8px;
    width: 96px;
    .room-card {
      width: 96px;
      height: 72px;
      margin-right: 18rpx;
      border-radius: 8rpx;
      position: relative;
      &:nth-child(3n) {
        margin-right: 0;
      }
      image,
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
      .tab-video {
        position: absolute;
        top: 16rpx;
        left: 16rpx;
        width: 36rpx;
        height: 36rpx;
      }
    }
    .unit-type {
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      margin: 20rpx 0 16rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .tag {
      margin-bottom: 16rpx;
    }
    .amount {
      display: flex;
      align-items: baseline;
      .price {
        color: #fa2020;
        font-weight: 600;
        font-size: 30rpx;
      }
      .label {
        font-size: 20rpx;
        color: #999999;
        margin-left: 5rpx;
      }
    }
  }
}
</style>
